<template>
   <div class="Back">
       <div class="report overflow-auto">
            <!-- 头部 -->
            <div class="title flex">
                   <div></div>
                   <div class="overflow">{{ReportInfo.title}}</div>
                   <i class="el-icon-close close" @click="SETREPORT()"></i>
            </div>
            <!-- 内容 -->
            <div class="contentBox">
              <div class="content">
                  <!-- 选择框 -->
                    <el-select v-model="form.classify" placeholder="请选择">
                        <el-option
                            v-for="item in ReportClassifyData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- 文字区 -->
                    <div class="text">
                        <textarea maxlength="150" placeholder="请描述详情" v-model="form.content"></textarea>

                          <!-- 图片 -->
               
                        <el-upload
                            class="avatar-uploader flex"
                            v-model="form.image"
                            :headers="headers" 
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :limit='9' 
                            :multiple="true"
                            action="/api/File/upload/image/ReportImage"
                            list-type="picture-card">   
                            <i class="el-icon-plus"></i>
                        </el-upload>       
                    </div>

              </div>
            </div>

            <!-- 按钮 -->
            <el-button icon="el-icon-position" @click="publish_" id="publicButton">上传</el-button>
       </div>
   </div>
</template>
<script>
import { mapActions, mapState,mapMutations } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Report',['ReportInfo']),
        ...mapState('Init',['ReportClassifyData']), //举报类型数据
     },
     methods:{
         ...mapActions('Init',['getReportClassifyData']),//获取举报信息
         ...mapActions('Report',['addReport']),//增加举报
         ...mapMutations('Report',['SETREPORT']), //举报框

           /*删除图片*/
        handleRemove(file) { 
          let res = file.response
          this.ImageUrls = this.ImageUrls.filter(item => item != res.data)
        },
        handleError(file){
         this.$message.error('未知错误');
       },
         handleAvatarSuccess(res) {
            if(res.type=='error') return this.$message.error('未知错误');
            if(res.code==-1) return this.$message.error(res.message);
            this.form.image = res.data;
            this.ImageUrls.push(res.data);
        },
        //上传图片前做一些限制
         beforeAvatarUpload(file) {
            const whiteList = ["image/jpeg", "image/png"];
            if (whiteList.indexOf(file.type) === -1) {
               this.$message.error('上传文件类型只能是 image/jpeg, image/png ');
               return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) this.$message.error('上传图片大小不能超过 5MB!');
            return isLt2M;
        },
        async publish_(){
            if(this.form.content == '') return this.$message.error('请上传图片')
             this.form.image=this.ImageUrls.toString() || null;
             let res = await this.addReport(this.form)
              if(res.code == -1){
                 this.SETREPORT()
                 this.$public.toLogin()
                 return
              }
             if(res.code !=200) return this.$message.error(res.message)
      
             this.$message.success(res.message)
             this.SETREPORT()

        }
     },
     data() {
        return {
             form:{},
             ImageUrls:[],
             headers:{
               token:localStorage.getItem("token")
            },
        }
     },
     created(){
       if(this.ReportClassifyData.length == 0)
         this.getReportClassifyData()
        this.form = {...{classify:1,content:'',image:''},...this.ReportInfo.report}

     },
     mounted() {
        document.body.style.overflow = 'hidden'
     },
     beforeDestroy(){
        document.body.style.overflow = 'auto'
     }
  }
</script>
<style scoped lang='less'>
// 关闭图标
.close{
    font-size: 25px;
    padding: 5px;
    border-radius: 50%;
    font-size: 25px;
    color: white;
    font-weight: 600;
}
.close:hover{
    background: rgba(0, 0, 0, 0.3);
}
::v-deep .el-input__inner{
    background: var(--BackColor) !important;
}
/* upload样式 */

::v-deep .el-upload-list__item-thumbnail{ //图片
   object-fit: cover !important;
}

::v-deep .el-upload{  //每个盒子
    border: 2px solid var(--GeneralBackColor);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}
::v-deep .el-upload:hover{
   border: 2px solid var(--GeneralBackColor);
}

.avatar-uploader{
    border-radius: 6px;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    
    i{
      font-size: 50px;
    }
}
.report{
    min-width: 350px;
    width: 80%;
    max-width: 700px;


    border-radius: 15px;
    background: var(--GeneralBackColor-half);
    overflow: hidden;
}
// 标题
.title{
    width: 100%;
    height: 50px;
    background: var(--GeneralBackColor);
    flex-wrap: nowrap;

    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;

    position: relative;

    color: white;
    font-size: 18px;

    position: sticky;
    top: 0;
}
//内容
.contentBox{
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;

    max-height: calc(90vh - 50px);
    overflow: auto;
}
.content{
   width: 100%;
   height: 400px;
}
//文字
.text{
   width: 100%;
   background: var(--BackColor);
   border-radius: 5px;
   padding: 10px;
   box-sizing: border-box;
  margin: 10px 0;
   textarea{
      width: 100%;
      height:200px;
	  font-size: 15px;
      overflow: auto;
   }
}
//发布按钮
#publicButton{
   margin: 10px 0;
   width: 80%;
   margin-left: 10%;
   border-radius: 25px;
   background: var(--GeneralBackColor);
   color: white;
   margin-top: 10px;
}

</style>